(ns ura.tailwind
  (:require 
   [stylefy.core :as sty]
   [ura.common :as uc :refer [log spy]]
   [taoensso.telemere :as t]
  ))


(def hslColor [["red" 0]
               ["orange" 30]
               ["yellow" 60]
               ["green"  120]
               ["cyan" 180]
               ["blue" 210]
               ["purple" 270]
               ["pink" 300]
                ]
  )


(defn gen-hsl-plate []
  (->>
   (for [[cname h] hslColor
         l (range 100 1000 100)]
     {(keyword (str cname "-" l))
      (str "hsl(" h ", 100%, " (- 100 (* 5 (/ l 100))) "%)")}
     )
   (reduce merge)
   (t/spy!)
   )
  )

(defn gen-gray-plate []
  (->> 
   (for [l (range 0 1001 100)]
     {(keyword (str "gray-" l))
      (str "hsl(0, 0%, " (/ l 10) "%)")
      }
     )
   (reduce merge)
   (t/spy!)
   )
  )


(def namedColor {
                 :primary "hsl(240, 100%, 70%)"
                 :secondary "hsl(240, 100%, 90%)"
                 :dangerous "hsl(0, 100%, 70%)"
                 :error "hsl(0, 100%, 100%)"
                 :white "hsl(0, 0%, 100%)"
                 :black "hsl(0, 0%, 0%)"
                 })

(def colorPlate (merge
                 (gen-hsl-plate)
                 (gen-gray-plate)
                 namedColor
                 )
  )


(def keymap  {
              :bgc				:background-color
              :bg				:background
              :bc               		:border-color
              :border-c         		:border-color
              :tc               		:color
              :text-c           		:color

              :bg-o				:--tw-bg-opacity
              :border-o				:--tw-border-opacity
              
              :p  				:padding
              :pt 				:padding-top
              :pr 				:padding-right
              :pb 				:padding-bottom
              :pl 				:padding-left
              :m  				:margin
              :mt 				:margin-top
              :mr 				:margin-right
              :mb 				:margin-bottom
              :ml 				:margin-left
              :w 				:width
              :h 				:height
              :min-w 				:min-width
              :max-w 				:max-width
              :min-h 				:min-height
              :max-h 				:max-height
              :ac 				:align-content
              :jc 				:justify-content
              :ji 				:justify-items
              :js 				:justify-self
              :ai 				:align-items
              :as 				:align-self
              :bgo 				:--tw-bg-opacity
              :bg-opacity 			:--tw-bg-opacity
              
              :rounded 				:border-radius
              
              :rounded-tl 			:border-top-left-radius
              :rounded-tr 			:border-top-right-radius
              :rounded-bl 			:border-bottom-left-radius
              :rounded-br 			:border-bottom-right-radius

              :z 				:z-index
              :gapx 				:column-gap
              :gapy 				:row-gap

              :border     			:border-width
              :border-t 			:border-top-width
              :border-b         		:border-bottom-width
              :border-l         		:border-left-width
              :border-r         		:border-right-width
              :border-top 			:border-top-width
              :border-bottom    		:border-bottom-width
              :border-left      		:border-left-width
              :border-right     		:border-right-width

              :px 				:padding-x
              :py 				:padding-y
              :mx 				:margin-x
              :my 				:margin-y
              }
  )



(defn color-style [k v]
  {k (colorPlate (keyword v) v)}
  )

(defn pixel-value [v]
  (if (re-matches #"[-\.0-9]*" v)
       (str v "px")
       v
       )
  )

(defn pixel-style [k v]
  {k (pixel-value v)}
  )

(def styleOpt {
               ;; xxx-color = colorPlate red-100
               :background-color	color-style
               :color           	color-style
               :border-color    	color-style
               :outline-color		color-style

               ;; px=10px --> {:padding-left 10px :padding-right 10px}
               :padding-y 		(fn [k v] {:padding-top  (pixel-value v)
                                                   :padding-bottom (pixel-value v)})
               :padding-x 		(fn [k v] {:padding-left (pixel-value v)
                                                   :padding-right  (pixel-value v)})
               ;; mx=10px mx=10 --> {:margin-left 10px :margin-right 10px}
               :margin-x 		(fn [k v] {:margin-left (pixel-value v)
                                                   :margin-right  (pixel-value v)})
               :margin-y 		(fn [k v] {:margin-top  (pixel-value v)
                                                   :margin-bottom (pixel-value v)})

               :padding			pixel-style
               :padding-top		pixel-style
               :padding-right		pixel-style
               :padding-bottom		pixel-style
               :padding-left		pixel-style
               :margin			pixel-style
               :margin-top		pixel-style
               :margin-right		pixel-style
               :margin-bottom		pixel-style
               :margin-left		pixel-style

               :gap			pixel-style
               :column-gap		pixel-style
               :row-gap			pixel-style

               :width			pixel-style
               :min-width		pixel-style
               :max-width		pixel-style
               :height			pixel-style
               :min-height		pixel-style
               :max-height		pixel-style

               :top			pixel-style
               :bottom			pixel-style
               :left			pixel-style
               :right			pixel-style
               
               
               :border-top-radius 	(fn [k v] {:border-top-left-radius (pixel-value v)
                                                   :border-top-right-radius (pixel-value v)})
               :border-bottom-radius 	(fn [k v] {:border-bottom-left-radius (pixel-value v)
                                                   :border-bottom-right-radius (pixel-value v)})
               :border-right-radius 	(fn [k v] {:border-top-right-radius (pixel-value v)
                                                   :border-bottom-right-radius (pixel-value v)})
               :border-left-radius 	(fn [k v] {:border-top-left-radius (pixel-value v)
                                                   :border-bottom-left-radius (pixel-value v)})
               :border-radius 		(fn [k v] {
                                                   :border-top-left-radius (pixel-value v)
                                                   :border-top-right-radius (pixel-value v)
                                                   :border-bottom-left-radius (pixel-value v)
                                                   :border-bottom-right-radius (pixel-value v)
                                                   })

               :outline-width 		pixel-style
               }
  )


(def stylemap {;layout
               ;;display
               :block	                {:display :block}
               :inline-block	        {:display :inline-block}
               :inline	                {:display :inline}
               :flex	                {:display :flex}
               :inline-flex	        {:display :inline-flex}
               :table	                {:display :table}
               :inline-table	        {:display :inline-table}
               :table-caption	        {:display :table-caption}
               :table-cell	        {:display :table-cell}
               :table-column	        {:display :table-column}
               :table-column-group	{:display :table-column-group}
               :table-footer-group	{:display :table-footer-group}
               :table-header-group	{:display :table-header-group}
               :table-row-group	        {:display :table-row-group}
               :table-row	        {:display :table-row}
               :flow-root	        {:display :flow-root}
               :grid	                {:display :grid}
               :inline-grid	        {:display :inline-grid}
               :contents	        {:display :contents}
               :list-item	        {:display :list-item}
               :hidden	                {:display :none}

               ;; position
               :static	                {:position :static}
               :fixed	                {:position :fixed}
               :absolute	        {:position :absolute}
               :relative	        {:position :relative}
               :sticky	                {:position :sticky}
               ;;visibility
               :visible	                {:visibility :visible}
               :invisible		{:visibility :hidden}

                                        ;flex grid
               :flex-row                {:flex-direction :row}
               :flex-row-reverse	{:flex-direction :row-reverse}
               :flex-col	        {:flex-direction :column}
               :flex-col-reverse	{:flex-direction :column-reverse}

               :flex-wrap	        {:flex-wrap :wrap}
               :flex-wrap-reverse	{:flex-wrap :wrap-reverse}
               :flex-nowrap	        {:flex-wrap :nowrap}

               :jc-s			{:justify-content :flex-start}
               :jc-e			{:justify-content :flex-end}
               :jc-c			{:justify-content :center}
               :jc-b			{:justify-content :space-between}
               :jc-a			{:justify-content :space-around}
               :jc-ev			{:justify-content :space-evenly}
               :justify-start		{:justify-content :flex-start}
               :justify-end		{:justify-content :flex-end}
               :justify-center		{:justify-content :center}
               :justify-between		{:justify-content :space-between}
               :justify-around		{:justify-content :space-around}
               :justify-evenly		{:justify-content :space-evenly}

               :ji-s			{:justify-items :start}
               :ji-e			{:justify-items :end}
               :ji-c			{:justify-items :center}
               :ji-st			{:justify-items :stretch}
               :justify-items-start	{:justify-items :start}
               :justify-items-end	{:justify-items :end}
               :justify-items-center	{:justify-items :center}
               :justify-items-stretch	{:justify-items :stretch}

               :js-a			{:justify-self :auto}
               :js-s			{:justify-self :start}
               :js-e     		{:justify-self :end}
               :js-c			{:justify-self :center}
               :js-st			{:justify-self :stretch}
               :justify-self-auto	{:justify-self :auto}
               :justify-self-start	{:justify-self :start}
               :justify-self-end	{:justify-self :end}
               :justify-self-center	{:justify-self :center}
               :justify-self-stretch	{:justify-self :stretch}

               :ac-c			{:align-content :center}
               :ac-s			{:align-content :flex-start}
               :ac-e			{:align-content :flex-end}
               :ac-b			{:align-content :space-between}
               :ac-a			{:align-content :space-around}
               :ac-ev			{:align-content :space-evenly}
               :content-center		{:align-content :center}
               :content-start		{:align-content :flex-start}
               :content-end		{:align-content :flex-end}
               :content-between		{:align-content :space-between}
               :content-around		{:align-content :space-around}
               :content-evenly		{:align-content :space-evenly}
                                	
               :ai-s			{:align-items :flex-start}
               :ai-e			{:align-items :flex-end}
               :ai-c			{:align-items :center}
               :ai-b			{:align-items :baseline}
               :ai-st			{:align-items :stretch}
               :items-start		{:align-items :flex-start}
               :items-end		{:align-items :flex-end}
               :items-center		{:align-items :center}
               :items-baseline		{:align-items :baseline}
               :items-stretch		{:align-items :stretch}
                                	
               :as-a			{:align-self :auto}
               :as-s			{:align-self :flex-start}
               :as-e 			{:align-self :flex-end}
               :as-c			{:align-self :center}
               :as-st			{:align-self :stretch}
               :as-b			{:align-self :baseline}
               :self-auto		{:align-self :auto}
               :self-start		{:align-self :flex-start}
               :self-end 		{:align-self :flex-end}
               :self-center		{:align-self :center}
               :self-stretch		{:align-self :stretch}
               :self-baseline		{:align-self :baseline}

               :place-content-center	{:place-content :center}
               :place-content-start	{:place-content :start}
               :place-content-end	{:place-content :end}
               :place-content-between	{:place-content :space-between}
               :place-content-around	{:place-content :space-around}
               :place-content-evenly	{:place-content :space-evenly}
               :place-content-stretch	{:place-content :stretch}
               
               :place-items-start	{:place-items :start}
               :place-items-end   	{:place-items :end}
               :place-items-center	{:place-items :center}
               :place-items-stretch	{:place-items :stretch}
               
               :place-self-auto  	{:place-self :auto}
               :place-self-start 	{:place-self :start}
               :place-self-end   	{:place-self :end}
               :place-self-center	{:place-self :center}
               :place-self-stretch	{:place-self :stretch}
               
               ;;typography
               :text-left		{:text-align :left}
               :text-center		{:text-align :center}
               :text-right		{:text-align :right}
               :text-justify		{:text-align :justify}
               
               ;; border
               :border-solid		{:border-style :solid}
               :border-dashed		{:border-style :dashed}
               :border-dotted		{:border-style :dotted}
               :border-double		{:border-style :double}
               :border-none		{:border-style :none}
               
               ;; interactivity
               :cursor-auto		{:cursor :auto}
               :cursor-default		{:cursor :default}
               :cursor-pointer		{:cursor :pointer}
               :cursor-wait		{:cursor :wait}
               :cursor-text		{:cursor :text}
               :cursor-move		{:cursor :move}
               :cursor-help		{:cursor :help}
               :cursor-not-allowed	{:cursor :not-allowed}
               }
  )
